<template>
    <div class="head">
        <van-nav-bar   :title="id ?'编辑地址':'地址管理'"  left-arrow @click-left="$router.back()"> 
            <template #right>
                <van-icon name="ellipsis" size="18" />
            </template>
         </van-nav-bar>
    </div>

    <van-address-edit
    :address-info="info"
    :area-list="areaList"
    :show-delete="id?true : false"
    show-set-default
    :area-columns-placeholder="['请选择', '请选择', '请选择']"
    @save="onSave"
    @delete="onDelete"
    />
</template>
<script setup>
import {ref,reactive,onMounted} from 'vue'
import { areaList } from "@vant/area-data"
import {addressAdd,addressDetail,updateAddress,removeAddress} from "../../api/index.js"
import {useRouter,useRoute} from "vue-router"
import { showConfirmDialog } from 'vant';
import { showToast } from 'vant';

let router =useRouter()
let route =useRoute()
let id =route.query.addressId
// 回显数据
let info =ref({})
// 新建地址 和实现编辑
let onSave=(obj)=>{
    console.log(obj);
    if(id){
        // id存在 实现编辑
        updateAddress({
        'addressId':id,
        'areaCode':obj.areaCode,
        'cityName':obj.city,
        'defaultFlag':obj.isDefault?1:2,
        'detailAddress':obj.addressDetail,
        'postalCode':obj.country,
        'provinceName':obj.province,
        'regionName':obj.county,
        'userName':obj.name,
        'userPhone':obj.tel,
        
        }).then(res=>{
            if(res.resultCode==200){
                showToast('编辑成功');
                router.push('/address')
            }
        })
    }else{
        // id不存在 实现新增
        addressAdd({
        'areaCode':obj.areaCode,
        'cityName':obj.city,
        'defaultFlag':obj.isDefault?1:2,
        'detailAddress':obj.addressDetail,
        'postalCode':obj.country,
        'provinceName':obj.province,
        'regionName':obj.county,
        'userName':obj.name,
        'userPhone':obj.tel,
    }).then(res=>{
        console.log(res);
        if(res.resultCode==200){
            showToast('添加成功');
            router.push('/address')
        }
    })
    }
    

}

onMounted(()=>{
    getDetail()
})
// 更具地区，获取地址编码
const getAreaCode =(area)=>{
    area=area.replace(/区|县/,"")
    for(let k in areaList.county_list){
        if(areaList.county_list[k].includes(area)){
            return k
        }
    }
}
async function getDetail(){
    let {data} =await addressDetail(id)
    console.log(data);
    if(data==null){
        return
    }
    info.value={
        name:data.userName,
        tel:data.userPhone,
        province:data.provinceName,
        city:data.cityName,
        county:data.regionName,
        addressDetail:data.detailAddress,
        areaCode:getAreaCode(data.regionName),
        isDefault:data.defaultFlag?true:false,
    }
}
// 删除地址
let onDelete=()=>{
    showConfirmDialog({
        
        message:'确定要删除吗',
    })
    .then(() => {
        removeAddress(id).then(res=>{
            console.log(res);
            if(res.resultCode==200){
                showToast('删除成功');
                setTimeout(()=>{
                    router.push('/address')
                },500)
                
            }
        })
       
    })
    .catch(() => {
        // on cancel
    });
}
</script>
<style scoped lang="less">
.head{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
}
.van-address-edit{
    margin-top: 50px;
}
</style>